<template>
  <div class="lauch-item">
    <div class="lauch-icon" @click="openApp(app.appId)">
      <img :src="app.icon" alt />
    </div>
    <p class="lauch-title">{{ app.title }}</p>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: {

    app: {
      type: Object,
      default: () => { }
    }
  },
  methods: {
    ...mapActions(['openApp'])
  }
}
</script>

<style lang="less" scoped>
.lauch-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .lauch-icon {
    img {
      width: 100%;
      height: 100%;
    }
    border-radius: 10px;
    width: 100px;
    height: 100px;
  }
  .lauch-title {
    font-size: 16px;
    margin-top: 10px;
  }
  padding: 50px 40px;
  color: white;
  // background: blue;
}
</style>